<template>
  <view>
    <image src="../../static/img/logo.png" mode=""></image>
    <p>源码单词</p>
    <van-button @click="getUserProfile" block round color="linear-gradient(to right, #68e5fb, #87dee3)">
      <span>微信一键登录</span>
    </van-button>
    <!-- <p>登录代表您同意《用户协议》</p> -->
  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('user', ['updataUserInfo', 'updateToken']),
      // 获取用户授权后的基本信息
      getUserProfile(e) {
        console.log(666)
        uni.getUserProfile({
          desc: '你的授权信息',
          success: (res) => {
            console.log(res,'token')
            this.updataUserInfo(res.userInfo)
            this.getToken(res)
          },
        })
      },
      async getToken(info) {
        // 获取code值
        const [err, res] = await uni.login().catch(err => err)
        if (err || res.errMsg !== "login:ok") return uni.$showMsg("登录失败！")
        // console.log(res, 66)
        // 准备参数
        const query = {
          code: res.code,
          rawData: info.rawData,
        }
        console.log(query, 'query')
        const res2 = await uni.$myRequest('/api//wxlogin', 'POST', query)
        console.log(res2,'res2')
        if (res2.data.status !== 200) return uni.$showMsg('登录失败')
        // 把token保存到vuex中
        this.updateToken(res2.data.token)
        // 跳转页面
        uni.switchTab({
          url: '/pages/home/home'
        })
      },
    },
  }
</script>

<style lang="scss">
  image {
    height: 200rpx;
    width: 200rpx;
    display: block;
    margin: auto;
    border-radius: 50%;
    margin-top: 200rpx;
  }

  p:nth-of-type(1) {
    text-align: center;
    margin-top: 20rpx;
    font-size: 22px;
    font-weight: 700;
    color: #60bbc1;
  }



  van-button {
    display: flex;
    margin: auto;
    margin-top: 40rpx;
    width: 80%;
    border-radius: 8px;

    span {
      font-size: 16px;
    }
  }

  p:nth-of-type(2) {
    text-align: center;
    margin-top: 20rpx;
    font-size: 14px;
    color: #999aaa;
  }
</style>
